<template>
  <div>
    <el-button @click="drawer = true" type="primary">临时打开</el-button>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      :size="480"
      :before-close="handleClose"
    >
      <div slot="title">客户信息</div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :name="1">
          <div slot="title">
            <b class="fz18">基本信息</b>
          </div>
          <el-form ref="form1" :label-width="LABELWIDTH" label-position="left">
            <el-form-item class="pc-mb0">
              <span slot="label">昵称</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">年龄</span>
              {{ cusInfo.年龄 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">编号(id号)</span>
              {{ cusInfo.编号id }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">进线渠道</span>
              {{
                cusInfo.进线渠道
                  | _index2par("id")
                  | _findObj(postParams.FROMSOURCES)
                  | _getValue("name")
              }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">资金量</span>
              {{ cusInfo.资金量 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">订阅产品</span>
              {{
                cusInfo.订阅产品
                  | _index2par("id")
                  | _findObj(postParams.crmProducts)
                  | _getValue("name")
              }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">成交时间</span>
              {{ cusInfo.成交时间 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">客户状态</span>
              {{ cusInfo.客户状态 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">客户所在分组</span>
              {{ cusInfo.客户所在分组 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">风控标签</span>
              {{ cusInfo.风控标签 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">登录次数</span>
              {{ cusInfo.登录次数 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">秘书咨询次数</span>
              {{ cusInfo.秘书咨询次数 }}
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item :name="2">
          <div slot="title">
            <b class="fz18">客户画像</b>
            <span class="fz14 fc-gray50">(普客客服)</span>
          </div>
          <el-form ref="form2" :label-width="LABELWIDTH" label-position="left">
            <el-form-item class="pc-mb0">
              <span slot="label">归属普客客服</span>
              {{ cusInfo.普客客服.归属 }}
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">客户类型</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">性格</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">服务喜好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">操作偏好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">投资偏好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item :name="3">
          <div slot="title">
            <b class="fz18">客户画像</b>
            <span class="fz14 fc-gray50">(大客客服)</span>
          </div>
          <el-form ref="form3" :label-width="LABELWIDTH" label-position="left">
            <el-form-item class="pc-mb0">
              <span slot="label">归属大客客服</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">客户类型</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">性格</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">服务喜好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">操作偏好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">投资偏好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item :name="4">
          <div slot="title">
            <b class="fz18">客户画像</b>
            <span class="fz14 fc-gray50">(大客销售)</span>
          </div>
          <el-form ref="form4" :label-width="LABELWIDTH" label-position="left">
            <el-form-item class="pc-mb0">
              <span slot="label">归属大客销售</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">客户类型</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">性格</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">服务喜好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
            <el-form-item class="pc-mb0">
              <span slot="label">操作偏好</span>
              <el-input v-model="tempData"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["cusInfo", "postParams"]),
  },
  data() {
    return {
      drawer: false,
      activeNames: [1, 2, 3, 4],
      LABELWIDTH: "7em",
      tempData: "未填充",
    };
  },
  filters: {
    _index2par(value, key) {
      return { key: key, value: value };
    },
    _findObj({ key, value }, collection) {
      let obj = collection.find((v) => {
        return v[key] == value;
      });
      return obj;
    },
    _getValue(obj, valueName) {
      return _.get(obj, valueName, "未匹配");
    },
  },
  methods: {
    handleClose(done) {
      console.log(this.postParams);
      console.log(this.cusInfo);
      done();
      // this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style>
</style>